/*
 * @Author: your name
 * @Date: 2021-12-28 10:43:51
 * @LastEditTime: 2021-12-28 14:59:58
 * @LastEditors: LAPTOP-L472H14P
 * @Description: In User Settings Edit
 * @FilePath: \react-dnd-demo\src\Components\CardDrop\Card.js
 */
import React, { Component } from 'react';
import { Card } from 'antd';
import 'antd/dist/antd.css';
import { flow } from 'lodash';
import { DragSource, DropTarget } from 'react-dnd';
const type = Symbol('card');
const specSource = {
  beginDrag(props, monitor) {
    return props.item;
  },
};
const specSourceCollect = (connect) => {
  return {
    myconnect: connect.dragSource(),
  };
};

const specTarget = {
  drop(props, monitor) {
    const id = monitor.getItem().id;
    const { id: TargetId } = props.item;
    props.setPosition(id, TargetId);
  },
};
const specTargetCollect = (connect) => {
  return {
    myDropTarget: connect.dropTarget(),
  };
};
class CardDropItem extends Component {
  render() {
    const { item, myconnect, myDropTarget } = this.props;
    console.log(this.props);
    return myconnect(
      myDropTarget(
        <div>
          <Card style={{ width: 300, margin: 10 }} bordered title={item.title}>
            {item.bodyContent}
          </Card>
        </div>,
      ),
    );
  }
}

export default flow(
  DragSource(type, specSource, specSourceCollect),
  DropTarget(type, specTarget, specTargetCollect),
)(CardDropItem);
